<template>
  <a-modal
    :title="this.title"
    :visible="this.visible"
    :width="620"
    @cancel="cancel"
    @ok="ok"
  >
    <a-form :form="form" layout="horizontal">
      <a-form-item
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        label="角色"
      >
       <a-input v-decorator="this.validator.roleName" />
      </a-form-item>
      <a-form-item
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        label="角色权限"
      >
        <a-tree-select
          v-decorator="this.validator.systemMenu"
          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
          :tree-data="this.treeData"
          allow-clear
          show-search
          style="width: 100%"
          tree-checkable
          tree-default-expand-all
        >
        </a-tree-select>
       <!--<a-select mode= 'multiple' v-decorator="this.validator.systemMenu" :disabled="this.readonly">
            <a-select-option
              v-for="(item, key) of systemMenu"
              :value="item"
              :key="item"
            >{{item}}</a-select-option>
        </a-select>-->
      </a-form-item>
      <a-form-item
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        label="描述"
      >
      <a-input type="textarea" v-decorator="this.validator.description"/>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
  import aModal from "@/common/modal"
  import {GETALLROLELIST,ADDROLE,UPDATEROLE,PERMISSIONTREE} from '@/../static/js/apis.js'
  import {roleForm} from "@/../static/js/formValidators.js"
  export default {
    inject: ['reload'],                                 //注入App里的reload方法
    name: "roleModal",
    props: ['title', 'visible','readonly','roleId'],
    components: {
      aModal
    },
    data() {
      return {
        form: this.$form.createForm(this),
        labelCol: {span: 5},
        wrapperCol: {span: 16},
        systemMenu: ["S002数据管理", "S001业务管理", "S003监控管理", "S004服务管理", "S005虚拟化资源", "S000权限管理", "S006手机APP"],
        validator: roleForm,
        treeData:[]
      }
    },
    methods: {
      getStaticData () {
        let self = this
        PERMISSIONTREE('', function (res) {
          self.treeData = res.data
        })
      },
      ok(e) {
        let self = this;
        e.preventDefault();
        if (self.title == '添加角色') {
          self.form.validateFields((err, values) => {
            if (!err) {
              console.log('Received values of form: ', values);
              ADDROLE(values, function (res) {
                if (res.code=='200') {
                  self.$message.success(res.message)
                  self.$emit('ok', e)
                  self.reload()
                 } else self.$message.error(res.message)
              })
            }
          });
        } else {
          self.form.validateFields((err, values) => {
            if (!err) {
              console.log('Received values of form: ', values);
              values.id=self.roleId
              UPDATEROLE(values, function (res) {
                 if (res.code=='200') {
                  self.$message.success(res.message)
                  self.$emit('ok', e)
                  self.reload()
                 } else self.$message.error(res.message)
              })
            }
          });
        }
      },
      /*关闭modal*/
      cancel(e) {
        this.form.resetFields();
        this.$emit("cancel", e)
      },

    },
    created() {
      this.getStaticData()
    }
  }
</script>

<style scoped>

</style>
